<template>
    <!-- pages/inask/inask.wxml -->
    <view class="all">
        <form @submit.stop.prevent="formSubmit" @reset.stop.prevent="formReset" @submit="askForm">
            <view class>
                <text class="te">个人需求简介</text>
                <textarea name="myself"></textarea>
                <view class="inputs">
                    <text>个人介绍:</text>
                    <input name="introduction" type="text" />
                </view>
                <view class="inputs">
                    <text>专业：</text>
                    <input name="major" type="text" />
                </view>
                <view class="inputs">
                    <text>年级：</text>
                    <input name="grade" type="text" />
                </view>
                <view class="inputs">
                    <text>实习经验：</text>
                    <input name="experience" type="text" />
                </view>
                <view class="inputs">
                    <text>职位需求：</text>
                    <input name="command" type="text" />
                </view>
                <view class="inputs">
                    <text>职位：</text>
                    <input name="position" type="text" />
                </view>
                <view class="inputs">
                    <text>公司：</text>
                    <input name="company" type="text" />
                </view>
                <view class="inputs">
                    <text>时间：</text>
                    <input name="time" type="text" />
                </view>
                <view class="inputs">
                    <text>薪资需求：</text>
                    <input name="salary" type="digit" />
                </view>
                <text>更多:个人个性化介绍</text>
                <textarea width:700rpx name="more"></textarea>
            </view>
            <view class="btn-area">
                <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
                <button style="margin: 30rpx 0" formType="reset">Reset</button>
            </view>
        </form>
    </view>
</template>

<script>
// pages/inask/inask.js
export default {
    data() {
        return {
            pickerHidden: true,
            chosen: ''
        };
    },
    onShareAppMessage() {
        return {
            title: 'form',
            path: 'page/component/pages/form/form'
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        pickerConfirm(e) {
            this.setData({
                pickerHidden: true
            });
            this.setData({
                chosen: e.detail.value
            });
        },

        pickerCancel() {
            this.setData({
                pickerHidden: true
            });
        },

        pickerShow() {
            this.setData({
                pickerHidden: false
            });
        },

        formSubmit(e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value);
        },

        formReset(e) {
            console.log('form发生了reset事件，携带数据为：', e.detail.value);
            this.setData({
                chosen: ''
            });
        },

        formSubmit: function (e) {
            console.log(e.detail.value);
            this.setData({
                myself: e.detail.value.myself,
                introduction: e.detail.value.introduction,
                major: e.detail.value.major,
                grade: e.detail.value.grade,
                experience: e.detail.value.experience,
                command: e.detail.value.command,
                position: e.detail.value.position,
                company: e.detail.value.company,
                time: e.detail.value.time,
                salary: e.detail.value.salary,
                more: e.detail.value.more
            });
        }
    }
};
</script>
<style>
/* pages/inask/inask.wxss */
.all {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 2rpx solid #362b2b;
    border-bottom: 2rpx solid #362b2b;
}

.inputs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 30rpx;
    align-items: left;
}
input {
    border-bottom: 2rpx solid #b8b5b5;
}
textarea {
    margin-top: 20rpx;
    border-top: 2rpx solid #2b2525;
    border-bottom: 2rpx solid #2b2525;
    vertical-align: center;
    margin-bottom: 20rpx;
}
.btn-area {
    display: flex;
    flex-direction: row;
}
</style>
